最近开发时,遇到需要使用同一域名承载多个前端项目的场景,具体需求如下:
/v2
访问新版本前端项目/api
访问后端 Spring Boot 接口服务/
访问默认前端项目
1. Nginx 配置内容
server {
listen 80;
listen [::]:80;
server_name _;
server_name_in_redirect off;
proxy_set_header Host $host;
location /api {
proxy_pass http://0.0.0.0:0000;
}
location / {
index index.html;
root /path/to/main/web/app;
}
location /v2 {
index index.html;
alias /path/to/v2/web/app;
}
}
注意 Nginx 的 alias
配置。此时,新前端项目需要被放在 /path/to/v2/web/app
路径下。
2. 修改 publicPath 配置
仅仅通过上述配置,在访问新版前端时,会遇到资源文件无法找到的问题。
此时,可以通过对新版前端 vue.config.js
文件中的 publicPath
进行配置,以规避这一问题( 注:该方法仅适用于 Vue-Cli 3.x 构建的项目 ):
module.exports = {
...
publicPath: '/v2/',
...
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。